<template>
  <a-modal
    v-model:open="visible"
    :footer="null"
    :width="900"
    centered
    :maskClosable="true"
    @cancel="handleCancel"
    :closable="false"
  >
    <div class="login-container">
      <!-- 左侧品牌宣传区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <div class="logo-icon" style="margin-top: 50px">🚀</div>
            <h1 class="brand-title">Code Studio</h1>
          </div>

          <div class="brand-slogan">
            <h2>智能应用生成平台</h2>
<!--            <p>让创意变成现实，让编程更简单</p>-->
          </div>

          <div class="features">
            <div class="feature-item">🚀 快速生成</div>
            <div class="feature-item">🎨 智能设计</div>
            <div class="feature-item">⚡ 高效开发</div>
          </div>

          <div class="brand-quote">
            <p style="margin-left: 50px; margin-top: 40px">"用技术点亮创意，用智能驱动未来"</p>
          </div>
          <div class="brand-quote">
            <p style="margin-left: 240px; margin-top: 10px">by Dr.Liquor 2025.9</p>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-section">
        <!-- 自定义关闭按钮 -->
        <button class="close-btn" @click="handleCancel" style="margin-left: 50px">
          <span>×</span>
        </button>

        <!-- 表单切换容器 -->
        <div class="form-container">
          <Transition name="slide" mode="out-in">
            <LoginForm
              v-if="isLoginMode"
              key="login"
              ref="loginFormRef"
              @switch-to-register="switchToRegister"
              @login-success="handleLoginSuccess"
            />
            <RegisterForm
              v-else
              key="register"
              ref="registerFormRef"
              @switch-to-login="switchToLogin"
              @register-success="handleRegisterSuccess"
            />
          </Transition>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import LoginForm from '../../components/LoginForm.vue'
import RegisterForm from '../../components/RegisterForm.vue'

// 定义 props
const props = defineProps<{
  open: boolean
}>()

// 定义事件
const emit = defineEmits<{
  'update:open': [value: boolean]
  loginSuccess: [userInfo: any]
  registerSuccess: [userInfo: any]
}>()

// 响应式数据
const visible = ref(props.open)
const isLoginMode = ref(true)
const loginFormRef = ref()
const registerFormRef = ref()

// 监听 props 变化
watch(() => props.open, (newVal) => {
  visible.value = newVal
})

// 监听 visible 变化
watch(visible, (newVal) => {
  emit('update:open', newVal)
})

// 切换到注册模式
const switchToRegister = () => {
  isLoginMode.value = false
}

// 切换到登录模式
const switchToLogin = () => {
  isLoginMode.value = true
}

// 处理取消
const handleCancel = () => {
  visible.value = false
  // 重置为登录模式
  isLoginMode.value = true
  // 清空表单
  setTimeout(() => {
    loginFormRef.value?.clearForm()
    registerFormRef.value?.clearForm()
  }, 300)
}

// 处理登录成功
const handleLoginSuccess = (userInfo: any) => {
  emit('loginSuccess', userInfo)
  visible.value = false
}

// 处理注册成功
const handleRegisterSuccess = (userInfo: any) => {
  emit('registerSuccess', userInfo)
  // 注册成功后自动切换到登录模式，但不关闭弹窗
}
</script>

<style scoped>
/* 双开门布局容器 */
.login-container {
  display: flex;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* 左侧品牌宣传区域 */
.brand-section {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.brand-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.brand-content {
  text-align: center;
  color: white;
  z-index: 1;
  position: relative;
  padding: 40px;
}

.brand-logo {
  margin-bottom: 24px;
}

.logo-icon {
  font-size: 48px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.brand-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-slogan h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 24px;
  opacity: 0.9;
}

.features {
  margin-bottom: 24px;
}

.feature-item {
  font-size: 16px;
  margin-bottom: 8px;
  opacity: 0.8;
}

.brand-quote {
  font-size: 16px;
  font-style: italic;
  opacity: 0.7;
  margin: 0;
}

/* 右侧表单区域 */
.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2f5 100%);
}

.close-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.close-btn span {
  font-size: 18px;
  color: #666;
  line-height: 1;
}

.form-container {
  width: 100%;
  max-height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 切换动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 覆盖 Ant Design 模态框样式 */
:deep(.ant-modal-content) {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

:deep(.ant-modal-body) {
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    height: auto;
  }

  .brand-section {
    min-height: 200px;
  }

  .brand-content {
    padding: 20px;
  }

  .brand-title {
    font-size: 24px;
  }

  .brand-slogan h2 {
    font-size: 18px;
  }

  .form-section {
    padding: 20px;
  }
}
</style>
